<template>
  <div class="help">
    <!-- 顶部标题 -->
    <div class="header">
      <van-nav-bar
        title="收益"
        style="background-image: linear-gradient(90deg, #bf73ff, #7579ff)"
      />
    </div>
    <!-- 标签栏 -->
    <div class="tab">
      <van-tabs v-model="active">
        <!-- 全部 -->
        <van-tab title="全部 ">
          <van-empty
            description="描述文字"
            v-if="finishOrderData.length == 0"
          />
          <van-card
            v-for="order in finishOrderData"
            :key="order.id"
            :title="order.employee.username"
            :thumb="order.employee.userFace"
          >
            <template #tags>
              <van-tag plain type="danger">已完成</van-tag>
            </template>
            <template #desc>
              <div>
                {{
                  order.address.province +
                  order.address.city +
                  order.address.area +
                  order.address.address
                }}
              </div>
            </template>
            <template #footer>
              <van-row>
                <van-col span="6"></van-col>
                <!-- 时间 -->
                <van-col span="10">{{ order.orderTime | reallyTime }}</van-col>
                <!-- 价格 -->
                <van-col span="6">{{ order.total }}￥</van-col>
              </van-row>
            </template>
          </van-card>
        </van-tab>
        <!-- 提现 -->
        <van-tab title="提现">
          <van-cell
            v-for="account in accountApplyData"
            :key="account.id"
            size="large"
          >
            <template #title>
              <span class="custom-title">提现到银行卡</span>
              <van-tag v-if="account.status == '不通过'" type="danger"
                >不通过</van-tag
              >
              <van-tag v-else-if="account.status == '未审核'" type="warning"
                >未审核</van-tag
              >
              <van-tag v-else type="success">通过</van-tag>
            </template>
            <template #extra> ￥{{ account.money }} </template>
            <template #label> {{ account.applyTime | reallyTime }} </template>
          </van-cell>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { get } from '@/http/axios'
import moment from "moment";

export default {
  data () {
    return {
      active: 2,
      finishOrderData: [],
      showaddress: '',
      accountApplyData: []
    }
  },
  filters: {
    reallyTime: function (date) {
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  methods: {
    ...mapActions('user', ["getUserInfo"]),
    async getAllFinishOrder () {
      let data = {
        page: 1,
        pageSize: 100,
        status: "已完成",
        employeeId: this.userInfo.id
      }
      // console.log(data);
      let res = await get('/order/pageQuery', data)
      // console.log(res);
      this.finishOrderData = res.data.data.list
      // console.log(this.finishOrderData);
    },
    async getAllAccountApply () {
      let data = {
        page: 1,
        pageSize: 100,
        userId: this.userInfo.id,
        applyType: '提现'
      }
      // console.log(data);
      let res = await get('/accountApply/pageQueryAccountApply', data)
      // console.log(res);
      this.accountApplyData = res.data.data.list
      // console.log(this.accountApplyData);
    }
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  created () {
    this.getUserInfo().then(() => {
      this.getAllFinishOrder()
    })
    this.getUserInfo().then(() => {
      this.getAllAccountApply()
    })
  }
}
</script>

<style scoped>
.van-image__img {
  width: 100px;
  height: 100px;
}
.van-card__title {
  font-size: 15px;
}
</style>